@charset "utf-8";
@import "../styles/rest.less";

.safe() {
    width: 894px;
    margin: 0 auto;
}
.help {
    .safe;
    height: 78px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 14px;
    color: #7f7f7f;
    a {
        color: #7f7f7f;
    }
    >div {
        margin-left: 27px;
        cursor: pointer;
    }
    >div:nth-of-type(1):hover a{
        opacity: 0.6;
        transition: all .3s;
    }
    >div:nth-of-type(2):hover p {
        opacity: 0.6;
        transition: all .3s;
    }

    .lang {
        display: flex;
        position: relative;
        .lang_w{
            position: absolute;
            width: 110px;
            height: 150px;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 0 6px #d3d3d3;
            right: 0;
            top:32px;
            z-index: 10;
            transition: all .3s;
            div {
                padding: 5px 20px;
                cursor: pointer;
                width: 70px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                &:hover {
                    background-color: #f9fafc;
                }
            }
        }
    }
    .lang::after {
        content: "";
        height: 0;
        width: 0;
        border: 5px solid transparent;
        border-top-color: #7f7f7f;
        display: inline-block;
        margin-top: 6px;
        margin-left:10px;
    }
}

.m_box {
    width: 400px;
    margin: 0 auto;
    padding-top: 80px;
    h1 {
        padding: 0 0 30px;
        margin: 0;
        font-size: 25px;
        text-align: center;
    }
}

.m_register {
    >div {
        box-sizing: border-box;
        width: 400px;
        display: flex;
        font-size: 12px;
    }
    >div:nth-of-type(1),
    >div:nth-of-type(3),
    >div:nth-of-type(5) {
        height: 45px;
        background-color: #f7f7f7;
        padding: 10px 15px;
        border-radius: 9px;
    }
}
.re_one {
    margin-bottom: 10px;
    position: relative;
    >div:nth-of-type(1){
        padding-right:5px;
        margin-right: 5px;
        line-height: 30px;
        position: relative;
        &::after {
            content: "";
            height: 10px;
            border-right: 1px solid rgba(0,0,0,.1);
            position: absolute;
            right: 0;
            top: 40%;
        }
    }
    >div:nth-of-type(2){
        line-height: 30px;
        &::after{
            content: "";
            background: url(../img/sanJx.png);
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: auto 100%;
            width: 14px;
            height: 24px;
            transition: transform .2s ease-in;
            position: absolute;
            right: 15px;
            top: 25%;
        }
    }
}

.re_two {
    color: #b2b2b2;
    padding-bottom: 18px;
}

.re_three {
    margin-bottom: 10px;
    position: relative;
    >input {
        width: 100%;
        background-color: #f7f7f7;
        &::-webkit-input-placeholder{
            font-size: 12px;
            color: #b2b2b2;
        }
    }
    .result {
            position: absolute;
            width: 160px;
            height: 25px;
            font-size: 12px;
            right: 6px;
            top: 10px;
    }
}
.re_four {
    margin-bottom: 10px;
    >div:nth-of-type(1) {
        width: 300px;
        height: 45px;
        background-color: #f7f7f7;
        padding: 10px 15px;
        box-sizing: border-box;
        line-height: 25px;
        border-radius: 9px;
        >input {
            width: 100%;
            background-color: #f7f7f7;
            cursor: not-allowed;
            &::-webkit-input-placeholder{
                font-size: 12px;
                color: #b2b2b2;
            }
        }
    }
    >div:nth-of-type(2){
        font-size: 12px;
        margin-left: 9px;
        width: 90px;
        height: 45px;
        padding: 0 8px;
        background-color: #d9d9d9;
        border-radius: 9px;
        color: #fff;
        text-align: center;
        line-height: 45px;
        cursor: not-allowed;
    }
}

.re_five {
    margin-bottom: 10px;
    >div:nth-of-type(1) {
        line-height: 25px;
        width: 370px;
        >input {
        width: 100%;
        background-color: #f7f7f7;
            &::-webkit-input-placeholder{
            font-size: 12px;
            color: #b2b2b2;
            }
        }
    }
    >div:nth-of-type(2) {
        .eyes {
            display: block;
            background: url(../img/reg01.png) no-repeat;
            width: 25px;
            height: 25px;
            background-size: 100%;
            cursor: pointer;
        }
        .eyel {
            display: block;
            background: url(../img/reg02.png) no-repeat;
            width: 25px;
            height: 25px;
            background-size: 100%;
            cursor: pointer;
        }
    }
    
} 

.re_six {
    color: #b2b2b2;
    padding-bottom: 18px;

}

.re_seven {
    padding-bottom: 10px;
    >div:nth-of-type(1) {
        margin-top: 2px;
        margin-right: 12px;
       
    }
    >div:nth-of-type(2) { 
            span {
                color: #00d488;
                cursor: pointer;
            }
    } 
}

.re_eight {
    padding-top: 30px;
    >div {
        width: 100px;
        height: 40px;
        background-color: #00d488;
        border-radius: 9px;
        margin: auto;
        opacity: .3;
        text-align: center;
        line-height: 40px;
        color: #fff;
        font-size: 15px;
        cursor: pointer;
    }
    
}

.footer_c {
    .safe;
    padding: 20px;
    text-align: center;
    span {
        font-size: 12px;
        color: #9b9b9b;
        margin: 0 3px;
    }
}

.block {
    display: block !important;
}
.none {
    display: none !important;
}

